<template>
    <div class="box">
      <header class="header">
        <van-nav-bar
          title="京东登录"
          left-text="返回"
          left-arrow
          @click-left="$router.back()"
        >
        </van-nav-bar>
      </header>
      <div class="content">
            <div class="form">
        <van-field v-model="loginname"  clearable label="用户名" placeholder="请输入手机号" />

    <van-field v-model="password" :type="type" placeholder="请输入登录密码" label="密码" :right-icon="typeIcon" @click-right-icon="changeType"/>
    <p v-show="flag" class="as"> 请输入至少6位密码，包含至少一个大写字母，1个小写字母，1个数字 </p>
    <div class="my-button">
      <van-button  color="#ff6666" block @click="loginFn" :disabled="telflag">登录</van-button>
    </div>
    <van-button class="dis" plain type="info" block @click="registerFn">点击注册</van-button>
    </div> 
      </div>
    </div>
</template>

<script>
import Vue from "vue";
import {login} from "@/utlis/user";
import { 
    Field,
    Button,
    Dialog, 
    NavBar, 
    Toast,
    } from 'vant';

Vue.use(Field)
Vue.use(Button);
Vue.use(Dialog);
Vue.use(NavBar)
Vue.use(Toast)

export default {
        data() {
        return {
            typeIcon: 'closed-eye',
            type:"passwrod",
            password:"",
            loginname:"",
        }
    },
    computed: {
    flag () {
      if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
        return false
      } else {
        return true
      }
    },
        telflag() {
            // 手机号
            if (/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.loginname)) {
                return false
            } else {
                return true
            }

        }
    },
    methods:{
                loginFn() {
            // 登录的按钮
            login({
                loginname: this.loginname,
                password: this.password
            })
                .then(res => {
                    console.log(res);
                    if (res.data.code == '10011') {
                        Toast('密码错误')
                        // console.log(this.loginname,this.password);
 
                    } else if (res.data.code == '10010') {
                        Toast('用户不存在')
                    } else {
                        Toast('登录成功')
                     this.$store.commit('changeLoginState',true)
                     this.$store.commit("userids",res.data.data.userid)
                     this.$store.commit("tokens",res.data.data.token)
                      // 保存用户的 id
                      localStorage.setItem('userid', res.data.data.userid)
                      // 保存用户的 token
                      localStorage.setItem('token', res.data.data.token)
                      // 用户的登录状态
                      localStorage.setItem('loginState', true)
                       this.$router.back()

                       
                    }
                })
        },  
        registerFn(){
            this.$router.push("/register")
        },
            changeType () {
      this.type = this.type === 'password' ? 'text' : 'password'
      this.typeIcon = this.type === 'password' ? 'closed-eye' : 'eye-o'
    },

    }

}
</script>

<style lang="stylus" scoped>
.as{
    margin 10px 0

}
.dis{
    margin-top 20px
}
</style>


